<script setup lang="ts">
import {CaretLeft, CaretRight, Expand,Fold ,Plus, Rank, VideoPlay} from "@element-plus/icons-vue";
import appStore from "@/store";
import IconButton from "@/components/common/iconButton.vue";
import {IMessage} from "@/interface/interviewInfo";
import MarkdownRenderer from "@/components/common/markdown-renderer.vue";

interface Prop {
  message: IMessage,
  avatar_url?: any,
  bubbleStyle?: 'dark' | 'light' | 'custom',
  bubbleSelfStyle?: 'default' | 'custom',
  customAiColor?: string[],
  customSelfColor?: string[],
  selected?: boolean,
  showPlay?: boolean,
  showHide?: boolean,
  showMarkDown?: boolean
}

const props = withDefaults(defineProps<Prop>(), {
  avatar_url: require('@/assets/images/AIAvatar.png'),
  bubbleStyle: "dark",
  bubbleSelfStyle: 'default',
  customAiColor: ()=>['#4f4f4f','#ffffff'],
  customSelfColor: ()=>['#95EC69','#000000'],
  selected: false,
  showPlay: true,
  showHide: true,
  showMarkDown: true
})

const {userInfo} = appStore.useUserInfoStore

watch(
    [() => props.bubbleStyle,()=>props.bubbleSelfStyle, () => props.customAiColor[0], ()=>props.customAiColor[1], () => props.customSelfColor[0], ()=>props.customSelfColor[1]],
    () => setStyle()
);

const setStyle = ()=>{
  if (props.bubbleStyle ==='custom' &&props.customAiColor && props.customAiColor.length === 2) {
    colorAI.value = `--bubble-ai-back: ${props.customAiColor[0]}; --bubble-ai-content: ${props.customAiColor[1]} `
  } else if (props.bubbleStyle === "dark") {
    colorAI.value = `--bubble-ai-back: #4f4f4f; --bubble-ai-content: #ffffff`
  } else {
    colorAI.value = `--bubble-ai-back: #ffffff; --bubble-ai-content: #000000`
  }
  if (props.bubbleSelfStyle ==='custom' && props.customSelfColor && props.customSelfColor.length === 2) {
    colorSelf.value = `--bubble-self-back: ${props.customSelfColor[0]}; --bubble-self-content: ${props.customSelfColor[1]} `
  } else {
    colorSelf.value = `--bubble-self-back: #95EC69; --bubble-self-content: #000000`
  }
}




const colorAI= ref('')
const colorSelf= ref('')
setStyle()
const emit = defineEmits(['playAudio', 'select'])
const playCooldown = ref(false)
const playAudioMsg = ref('点击播放')
const clickPlayAudio = () => {
  if (!playCooldown.value) {
    emit('playAudio')
    playCooldown.value = true
    playAudioMsg.value = '已加入播放队列，请稍等'
    setTimeout(() => {
      playCooldown.value = false
      playAudioMsg.value = '点击播放'
    }, 5000)
  }
}

</script>

<template>
  <div :class="['bubble', selected? 'bubble-select' : '']">
    <el-row style="margin-bottom: 10px" v-if="$slots.reference">
      <el-col :span="2" style="margin-right: 20px" v-if="message.type"></el-col>
      <el-col :span="4" v-else></el-col>
      <el-col :span="17" style="display: flex;align-items: center" :style="message.type?'justify-content: start': 'justify-content: end'">
        <div class="reference-bubble">
          <div class="text-container">
            <span v-show="!message.hideContent">
              引用：<slot name="reference"></slot>
            </span>
            <span v-show="message.hideContent">已隐藏......</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row v-if="message.type" @click="$emit('select', message.id)">
      <el-col :span="2" style="display: flex; align-items: start; justify-content: end;margin-right: 20px">
        <img :src="avatar_url" alt="avatar" class="avatar">
      </el-col>
      <el-col :span="17" style="display: flex; align-items: center;">
        <div class="chat-box-ai chat-box-left" :style="[colorAI, message.showAsMarkdown?'':'white-space: pre-line;']" >
          <span v-show="message.hideContent" v-if="message.content">
            {{ `${message.content.substring(0,5)}.....` }}
          </span>
          <span v-show="!message.hideContent">
            <span v-show="!message.showAsMarkdown">
              {{ message.content !== ''? message.content: '加载中..' }}
            </span>
            <span v-show="message.showAsMarkdown">
              <markdown-renderer :content="message.content !== ''? message.content: '加载中..'"></markdown-renderer>
            </span>
          </span>
        </div>
      </el-col>
    </el-row>
    <el-row v-else @click="$emit('select', message.id);">
      <el-col :span="4"></el-col>
      <el-col :span="17" style="display: flex; align-items: center; justify-content: end">
        <div class="chat-box-self chat-box-right" :style="[colorSelf, message.showAsMarkdown?'':'white-space: pre-line;']" >
          <span v-show="message.hideContent" v-if="message.content">
            {{ `${message.content.substring(0,5)}.....` }}
          </span>
          <span v-show="!message.hideContent">
            <span v-show="!message.showAsMarkdown">
              {{ message.content !== ''? message.content: '加载中..' }}</span>
            <span v-show="message.showAsMarkdown">
              <markdown-renderer :content="message.content !== ''? message.content: '加载中..'"></markdown-renderer>
            </span>
          </span>
        </div>
      </el-col>
      <el-col :span="2" style="display: flex; align-items: start; justify-content: start; margin-left: 20px">
        <img :src="userInfo.avatar_url" alt="avatar" class="avatar">
      </el-col>

    </el-row>
    <el-row style="margin-bottom: 10px">
      <el-col :span="2" style="margin-right: 20px" v-if="message.type"></el-col>
      <el-col :span="4" v-else></el-col>
      <el-col :span="17" >
        <div style="margin-top: 10px">
          <div style="display: flex; align-items: center;" :style="message.type?'justify-content: start': 'justify-content: end'">
            <icon-button :tooltip-content="playAudioMsg" @click="clickPlayAudio" :disable="playCooldown" v-if="showPlay">
              <el-icon size="24">
                <CaretRight/>
              </el-icon>
            </icon-button>
            <icon-button :plane="!message.hideContent" @click="()=>{message.hideContent = !message.hideContent}" v-if="showHide"
                         :tooltip-content="message.hideContent?'已隐藏，点击恢复':'点击隐藏'">
              <el-icon size="20">
                <Expand v-if="message.hideContent" />
                <Fold v-else/>
              </el-icon>
            </icon-button>
            <icon-button :plane="!message.showAsMarkdown" @click="()=>{message.showAsMarkdown = !message.showAsMarkdown}" v-if="showMarkDown"
                         :tooltip-content="message.showAsMarkdown?'已渲染为Markdown，点击恢复':'点击渲染为Markdown'">
              <el-icon size="20">
                <Rank/>
              </el-icon>
            </icon-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
  <div>

  </div>


</template>

<style scoped lang="css">

.bubble {
  width: 100%;
  padding: 0 10px;
  margin-bottom: 20px;
}

.bubble-select{
  border: 1px dashed gray;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.chat-box-ai {
  background-color: var(--bubble-ai-back);
  color: var(--bubble-ai-content);
  border-radius: 5px;
  padding: 10px 30px;
  position: relative;
  max-width: 100%;
}

.chat-box-self {
  background-color: var(--bubble-self-back);
  color: var(--bubble-self-content);
  border-radius: 5px;
  padding: 10px 30px;
  position: relative;
  max-width: 100%;

}

p {
  margin-bottom: 0;
}

.chat-box-left::after {
  content: '';
  position: absolute;
  left: -13px;
  top: 10px;
  width: 0;
  height: 0;
  border: 7px solid;
  border-color: transparent var(--bubble-ai-back) transparent transparent;
}

.chat-box-right::after {
  content: '';
  position: absolute;
  right: -13px;
  top: 10px;
  width: 0;
  height: 0;
  border: 7px solid;
  border-color: transparent transparent transparent var(--bubble-self-back);
}

.text-container {
  display: -webkit-box; /* 必须设置为弹性盒子 */
  -webkit-box-orient: vertical; /* 子元素垂直排列 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
  -webkit-line-clamp: 2; /* 限制为两行 */
  line-height: 1.5; /* 设置行高 */
  max-height: 4.5em; /* 最大高度 = 行高 × 行数 */
}

.reference-bubble {
  background-color: gray;
  border-radius: 5px;
  color: white;
  font-size: 12px;
  padding: 10px;
  max-width: 100%;
  display: inline-block
}

</style>